import {Layout, Button, Space, Flex, Radio, Input} from 'antd';
import {LeftOutlined, RightOutlined, CheckCircleTwoTone, setTwoToneColor, getTwoToneColor,PoundCircleTwoTone} from "@ant-design/icons";
import React, {useState, useEffect} from 'react';
import {useNavigate, useParams} from 'react-router-dom';

export default function SuccessSecondPage() {
    const { pay } = useParams();
    const [cost, setCost] = useState(0);

    setTwoToneColor('#FE4E84');
    getTwoToneColor(); // #eb2f96

    // 在 useEffect 中调用 fetchOrderInfo 函数
    useEffect(() => {
        fetchOrderInfo(pay);
    }, []); // 在组件挂载时获取订单信息

    const fetchOrderInfo = async (orderId) => {
        try {
            const orderList = JSON.parse(localStorage.getItem('orderList'));
            const foundOrder = orderList.find(order => order.orderId === Number(orderId));
            if (foundOrder) {
                const orderCost = foundOrder.cost + foundOrder.shipping - foundOrder.discount;
                console.log(orderCost);
                setCost(orderCost)
                // 这里你可以将 orderCost 进行后续处理，比如设置到 state 中
            } else {
                console.log('Order not found with id:', orderId);
            }
        } catch (error) {
            console.error('Error fetching order info:', error);
        }
    };

    const navigate = useNavigate();
    const handleToOrder = () => {
        navigate('/order/detail');
        //其实是oder/:id
        //navigate('/order/:id');
    }
    const changeOrderInfo = (orderId) => {
        try {
            const orderList = JSON.parse(localStorage.getItem('orderList'));
            const foundOrder = orderList.find(order => order.orderId === Number(orderId));
            if (foundOrder) {
                foundOrder.status = '待收货';
                localStorage.setItem('orderList', JSON.stringify(orderList));
            } else {
                console.log('Order not found with id:', orderId);
            }
        } catch (error) {
            console.error('Error fetching order info:', error);
        }
    };

    const handleToThird = () => {
        changeOrderInfo(pay);
        navigate('/order/pay/third/'+pay);
    }

    const handleBack = () => {
        navigate('/order/pay/first/'+pay);
    }

    return (
        <div style={{ margin: 'auto', backgroundColor: '#fff'}}>
        <div className="pay-container">

            <div className="header-container" style={{ marginTop: 10, textAlign: "center", display: "flex", alignItems: "center" }}>
                <LeftOutlined onClick={handleBack}/>
                <div className="header-center" style={{ textAlign: "center", margin: "0 auto" ,display:"flex"}}>
                    <PoundCircleTwoTone style={{fontSize:25}} />
                    <h3 style={{marginLeft:10}}>支付宝付款</h3>
                </div>

            </div>


            <div className="success-img" style={{textAlign:"center",marginTop:100}}>
                <p style={{color:"grey"}}>轻量化的商品订单</p>
                <h1 style={{fontSize:40}}>￥{cost}</h1>
            </div>

            <div  style={{ margin:'15px'}}>
                <Flex justify={"space-between"} align={"flex-start"}>
                    <p>支付宝账号</p>
                    <p>123123</p>
                </Flex>
                <Flex justify={"space-between"} align={"flex-start"}>
                    <p>付款方式</p>
                    <p>账户余额</p>
                </Flex>
            </div>

            <div className="button-container" style={{ marginTop: 100, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <Button type="primary" style={{  width: '95%', backgroundColor: '#FE4E84',borderRadius:10,height:40,fontSize:20 }} onClick={handleToThird}>
                   确认付款
                </Button>
            </div>
        </div>
        </div>
    );
}